import { createRef, useState } from 'react';
import { request, useModel } from '@umijs/max';
import { Avatar, Button, Descriptions, DescriptionsProps, Modal, Upload, message } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { ModalForm, PageContainer, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { updateAccountAvatar, updateAccountInfo } from '@/services/account/AccountController';
import { ReactCropperElement } from "react-cropper";
import "cropperjs/dist/cropper.css";
import UploadAvatar from '@/components/UploadAvatar';

export default function Page() {
  const { initialState, loading, refresh, setInitialState } = useModel('@@initialState');
  let data = initialState?.account
  const [edit, setEdit] = useState(false)
  const [pwd, setPwd] = useState(false)
  let close = () => setEdit(false)
  const [avatar, setAvatar] = useState(false)
  const cropperRef = createRef<ReactCropperElement>();
  return (
    <PageContainer loading={loading}>
      <Descriptions title={<>
        <span>基本信息</span>
        <Button type='link' icon={<EditOutlined />} onClick={() => setEdit(true)}>编辑</Button>
        <Button type='link' icon={<EditOutlined />} onClick={() => setPwd(true)}>修改密码</Button>
      </>} bordered >
        <Descriptions.Item label={"头像"} span={6} contentStyle={{ textAlign: "center" }}><Avatar className='pointer-events-auto' onClick={() => setAvatar(true)} src={data?.avatar} size={128}>{data?.nickname}</Avatar></Descriptions.Item>
        <Descriptions.Item label={"账户"}>{data?.username}</Descriptions.Item>
        <Descriptions.Item label={"昵称"}>{data?.nickname}</Descriptions.Item>
        <Descriptions.Item label={"所属单位"}>{data?.dept?.dept_name}</Descriptions.Item>
        <Descriptions.Item label={"电话"}>{data?.phone}</Descriptions.Item>
        <Descriptions.Item label={"邮箱"}>{data?.email}</Descriptions.Item>
        <Descriptions.Item label={"性别"}>{data?.sex === 1 ? "男" : data?.sex === 2 ? "女" : "未知"}</Descriptions.Item>
        <Descriptions.Item label={"创建时间"}>{data?.created_at.slice(0, 10)}</Descriptions.Item>
      </Descriptions>
      <ModalForm<Account.AcountUpdateDo> open={edit} title="编辑" width={450} modalProps={{ onCancel: close, destroyOnClose: true }} onFinish={async (data) => {
        await updateAccountInfo(data)
        refresh()
        close()
      }}>
        <ProFormText name="nickname" label="昵称" rules={[{ required: true, min: 3, max: 32, },]} initialValue={data?.nickname} />
        <ProFormText name="phone" label="手机" initialValue={data?.phone} placeholder="请输入手机" rules={[{ min: 8, max: 16, }]} />
        <ProFormText name="email" label="Email" initialValue={data?.email} placeholder="请输Email" />
        <ProFormSelect name="sex" label="性别" initialValue={data?.sex} options={[{ value: 0, label: "未知" }, { value: 1, label: "男" }, { value: 2, label: "女" }]} />
      </ModalForm>
      <ModalForm open={pwd} title="修改密码" width={450} modalProps={{ onCancel: () => setPwd(false), destroyOnClose: true }} onFinish={async (data) => {
        delete data.ss
        let res = await request("/api/account/change_password", { method: "PUT", data })
        if (res) {
          setPwd(false)
        } else {
          message.error("原密码不正确")
        }
      }}>
        <ProFormText.Password name="ss" hidden />
        <ProFormText.Password name="old_pwd" label="原密码" rules={[{ required: true, min: 3, max: 32, },]} />
        <ProFormText.Password name="new_pwd" label="新密码" rules={[{ required: true, min: 3, max: 32, },]} />
      </ModalForm>
      <Modal open={avatar} title="编辑头像" maskClosable={false} destroyOnClose onCancel={() => setAvatar(false)} okButtonProps={{
        onClick: () => {
          cropperRef.current?.cropper.getCroppedCanvas({ width: 512, height: 512 }).toBlob(async (data) => {
            let s = await request("/file/upload/avator.png", { method: "POST", data })
            await updateAccountAvatar("/file" + s.url)
            if (initialState) {
              initialState.account.avatar = "/file" + s.url
              setInitialState(initialState)
            }
            setAvatar(false)
          })
        }
      }}>
        <UploadAvatar img={data?.avatar || ""} ref={cropperRef}></UploadAvatar>
      </Modal>
    </PageContainer>
  );
}
